<template>
    <view class="container">
        <view class="user">
            <!-- #ifdef MP-WEIXIN -->
            <view class="left">
				<view class="nickname" v-if="Object.getOwnPropertyNames(business).length > 0">{{business.nickname}}</view>
                <!-- 微信小程序开发能力标签 获取微信昵称 -->
                <open-data v-else type="userNickName" class="nickname"></open-data>
            </view>
            <view class="right">
                <view class="avatar xcx">
                    <!-- 没有登录的时候，默认用微信的开发信息 -->
					<uv-avatar shape="square" mode="scaleToFill" size="100%" :src="business.avatar_cdn" v-if="Object.getOwnPropertyNames(business).length > 0"></uv-avatar>

                    <open-data v-else type="userAvatarUrl"></open-data>
                </view>
            </view>
            <!-- #endif -->

            <!-- H5和app -->
            <!-- #ifdef APP-PLUS || H5 -->
            <view class="left">
                <view class="nickname" v-if="business.nickname">{{business.nickname}}</view>
                <view class="nickname" v-else>请先登录</view>
            </view>
            <view class="right">
                <view class="avatar">
                    <uv-avatar :src="business.avatar_cdn" size="90" v-if="business.avatar_cdn"></uv-avatar>
                    <uv-avatar v-else src="/static/avatar.jpg" size="90"></uv-avatar>
                </view>
            </view>
            <!-- #endif -->
        </view>

        <!-- 菜单 对象不为空就说明有登录-->
        <view class="menu" v-if="Object.getOwnPropertyNames(business).length > 0">
            <view class="item" hover-class="checkActive" @click="ToProduct">
				<view class="title">产品防伪管理</view>
				<uv-icon name="arrow-right"></uv-icon>
			</view>

			<!--  #ifdef MP-WEIXIN -->
			<view class="item" hover-class="checkActive" @click="UnbindRef.open()">
				<view class="title">解除绑定账号</view>
				<uv-icon name="arrow-right"></uv-icon>
			</view>
			<!-- #endif -->

            <view class="item" hover-class="checkActive" @click="LogoutRef.open()">
                <view class="title">退出账号</view>
                <uv-icon name="arrow-right"></uv-icon>
            </view>
        </view>


        <!-- 登录按钮 -->
        <view class="actions" v-if="Object.getOwnPropertyNames(business).length <= 0">
            <!-- #ifdef MP-WEIXIN -->
            <view class="login">
                <uv-button color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" iconColor="#fff" iconSize="25" icon="weixin-circle-fill" @click="OnLogin">微信一键登陆</uv-button>
            </view>
            <!-- #endif -->

            <!--  #ifdef H5 || APP-PLUS-->
            <view class="login">
				<uv-button type="primary" @click="ToLogin">登陆帐号</uv-button>
            </view>
            <!-- #endif -->
        </view>
    </view>

    <!-- 确认对话框 -->
    <uv-modal ref="LogoutRef" title="退出账号" content="是否确认退出当前账号？" :showCancelButton="true" @confirm="OnLogout" @cancel="LogoutRef.close()"></uv-modal>

    <!-- #ifdef MP-WEIXIN -->
	<!-- 解除绑定账号 -->
	<uv-modal ref="UnbindRef" title="解除绑定" content="是否确认解除账号绑定？" :showCancelButton="true" @confirm="OnConfirmUnbind" @cancel="UnbindRef.close()"></uv-modal>
    <!-- #endif -->

	<!-- 消息提示 -->
	<uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 登录信息
const business = proxy.$business;

// 组件实例
const LogoutRef = ref(null);
const UnbindRef = ref(null);
const NoticeRef = ref(null);

// #ifdef H5 || APP-PLUS
// 跳转登录页面
const ToLogin = () =>
{
    // uv-ui 提供路由API
    uni.$uv.route('/pages/business/login');
}
// #endif

// 退出当前账号
const OnLogout = () =>
{
    NoticeRef.value.show({
        type:'success',
        message:'退出当前账号成功',
        complete:() =>
        {
            uni.removeStorageSync('business');

            business.value = {};

            proxy.$business.value = {};
        }
    });
}

// #ifdef MP-WEIXIN
const OnLogin = () =>
{
    // uni的第三方服务
    uni.login({
        provider: 'weixin', // 使用微信登录
        success: async (res) =>
        {
            const code = res.code ?? '';

            if(!code)
            {
                NoticeRef.value.show({
                    type:'error',
                    message:'获取临时凭证失败'
                });

                return false;
            }

            // 发起请求凭证换取用户的openid
            const result = await uni.$uv.http.post('/business/login',{code});

            if(result.code === 1)
            {
                NoticeRef.value.show({
                    type:'success',
                    message:result.msg,
                    complete:() =>
                    {
                        uni.setStorageSync('business',result.data);
                        proxy.$business.value = result.data;
                    }
                });
            }else{
                NoticeRef.value.show({
                    type:'error',
                    message:result.msg,
                    complete:() =>
                    {
                        // 获取后端返回的openid
                        const openid = result.data.openid ?? '';

                        if(openid)
                        {
                            uni.$uv.route('/pages/business/bind',{openid});
                        }
                    }
                });
            }
        }
    });

}

const OnConfirmUnbind = async () =>
{
    // 组装数据
    const params = {
        busid:business.value.id
    }

    // 发起请求
    const result = await uni.$uv.http.post('/business/unbind',params);

    if(result.code === 1)
    {
        NoticeRef.value.show({
            type:'success',
            message:result.msg,
            complete:() =>
            {
                uni.removeStorageSync('business');
                proxy.$business.value = {};
            }
        });
    }else{
        NoticeRef.value.show({
            type:'error',
            message:result.msg
        });
    }
}

// #endif

// 跳转商品
const ToProduct = () => uni.$uv.route('/pages/business/product');
</script>

<style>
page {
    background-color: #eee;
}

.container {
    width: 95%;
    margin: 0 auto;
}

.user {
    display: flex;
    padding: 40px;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 10px;
}

/* #ifdef H5  */
.user {
    align-items: center;
}

/* #endif */

.user .left {
    flex: 3;
}

/* 条件编译 */
/* #ifdef MP-WEIXIN  */
.user .left {
    flex: 3;
    display: flex;
    align-items: center;
    align-content: center;
}
/* #endif */


.user .right {
    flex: 1
}

.user .right .xcx {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100%;
    overflow: hidden;
}

.user .left .nickname {
    font-size: 26px;
    font-weight: bold;
}

.actions {
    display: flex;
    padding: 20px 40rpx;
}

.login {
    flex: 1;
}

.menu {
    background-color: #fff;
    margin-top: 10px;
}

.menu .item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px 10px;
    font-size: 14px;
}

.checkActive {
    background-color: rgba(233, 233, 233, 0.5);
}
</style>